﻿<p>
    <button type="button" class="btn btn-outline-primary" @onclick="@(e => AddTab(TabSet2))">
        <i class="fa fa-plus-circle"></i>
        <span>添加</span>
    </button>
    <button type="button" class="btn btn-outline-danger" @onclick="@(e => RemoveTab(TabSet2))">
        <i class="fa fa-minus-circle"></i>
        <span>移除</span>
    </button>
</p>

<Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
    <TabItem Text="用户管理" Closable="false">
        <div>我是用户管理</div>
    </TabItem>
    <TabItem Text="菜单管理">
        <div>我是菜单管理</div>
    </TabItem>
    <TabItem Text="角色管理">
        <div>我是角色管理</div>
    </TabItem>
    <TabItem Text="部门管理">
        <div>我是部门管理</div>
    </TabItem>
    <TabItem Text="任务管理">
        <div>我是任务管理</div>
    </TabItem>
</Tab>

@code {
    [NotNull]
    private Tab? TabSet2 { get; set; }

    private void AddTab(Tab tabset)
    {
        var text = $"Tab {tabset.Items.Count() + 1}";
        tabset.Add(new Dictionary<string, object>
        {
            [nameof(TabItem.Text)] = text,
            [nameof(TabItem.IsActive)] = true,
            [nameof(TabItem.ChildContent)] = new RenderFragment(builder =>
            {
                var index = 0;
                builder.OpenElement(index++, "div");
                builder.AddContent(index++, $"我是新建的 Tab 名称是 {text}");
                builder.CloseElement();
            })
        });
    }

    private async Task RemoveTab(Tab tabset)
    {
        if (tabset.Items.Count() > 4)
        {
            var item = tabset.Items.Last();
            await tabset.Remove(item);
        }
    }
}